<template>
<div>
    <div v-show='visiable'>
        绑定用户
        用户名: <input type="text" v-model="username" @blur="check_username">
        <span>{{username_message}}</span>
        密码: <input type="password" v-model="password">
        <button @click="bindUser">绑定</button>
    </div>
</div>
</template>

<script>
import {
    oauth_callback_post,
    oauth_binduser_post,
    user_count
} from './axios_api/api'
export default {
    data() {
        return {
            visiable: false, // 绑定用户窗口
            uid: '', // weibo_uid
            username: '',
            password: '',
            username_message: '',
            username_error: false,
            data:''

        }
    },

    methods: {
        // 判断用户名
        check_username() {
            console.log('判断用户名')
            console.log(this.username == '')
            var reg = new RegExp(/^[a-zA-Z0-9_-]{4,16}$/); //字符串正则表达式 4到14位（字母，数字，下划线，减号）
            if (this.username == '') {
                this.username_message = '用户名不能为空'
                this.username_error = true
                return false
            }
            if (!reg.test(this.username)) {
                this.username_message = '用户名格式不正确'
                this.username_error = true
                return false
            } else {
                // 去后端检查用户名使用数量
                user_count({
                    type: 'username',
                    data: this.username
                }).then((res) => {
                    console.log(res)
                    if (res.data.count > 0) {
                        this.username_message = '用户名已存在, 请输入密码'
                        this.username_error = false
                    } else {
                        this.username_message = '用户名可用, 将创建新用户,请输入密码'
                        this.username_error = false
                    }
                })
            }
        },
        getCode() {
            let code = this.$route.query.code
            console.log(this.$route.query)
            let data = {
                code: code
            }
            oauth_callback_post(data).then(resp => {
                console.log(resp)
                if (resp.data.type == '0') {
                    let res = res.data
                    localStorage.setItem('username', res.username)
                    // localStorage.setItem('img', res.img)
                    localStorage.setItem('token', res.token)
                    localStorage.setItem('uid', res.id)
                    this.login_username = res.username
                    this.opened = false
                    // alert(res.message)
                    this.$router.push('/')

                }
                if (resp.data.type == '1') {
                    this.visiable = true
                    this.uid = resp.data.uid
                }

            })

        },
        bindUser() {
            if (this.username_error) {
                return
            }
            // 发送  用户名, 密码, weibo_uid 到后端接口, 进行绑定
            let params = {
                username: this.username,
                password: this.password,
                weibo_uid: this.uid
            }
            oauth_binduser_post(params).then((resp) => {
                console.log(resp)
                let res = resp.data
                localStorage.setItem('username', res.username)
                // localStorage.setItem('img', res.img)
                localStorage.setItem('token', res.token)
                localStorage.setItem('uid', res.id)
                this.login_username = res.username
                this.opened = false
                this.$router.push('/')
            })
        }
    },
    mounted() {
        this.getCode()
    }

}
</script>

<style>

</style>
